<script setup>
import {inject, ref} from "vue";
import {getRelation} from "@/api/AuthApi.js";
import MpcUtil from "@/util/MpcUtil.js";
import { ElMessage } from 'element-plus';

const props = defineProps({
  shareContent: {
    type: Object,
    required: true
  }
})

const isShow = inject("isShow");
const friends = ref([]);


function sharing(friendId) {
  MpcUtil.send({
    type: 101,
    toType: 1,
    toId: friendId,
    title: props.shareContent.title,    // 分享标题
    coverUrl: props.shareContent.coverUrl, // 分享封面
    url: props.shareContent.url,      // 分享地址
  });
}

MpcUtil.connect('ws://192.168.1.100:5219', ()=>{}, ()=>{});


// 查询好友信息
getRelation().then(resp=>{
  if(resp.code === 1) {
    friends.value = resp.data;
  }
}).catch(err=>{
});

// 添加复制链接功能
function copyLink() {
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(props.shareContent.url).then(() => {
      ElMessage({
        message: '链接已复制',
        type: 'success'
      });
    });
  } else {
    const textArea = document.createElement("textarea");
    textArea.value = props.shareContent.url;
    textArea.style.position = "fixed";
    textArea.style.left = "-999999px";
    textArea.style.top = "-999999px";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
      document.execCommand('copy');
      ElMessage({
        message: '链接已复制',
        type: 'success'
      });
    } catch (err) {
      ElMessage({
        message: '复制失败，请手动复制',
        type: 'warning'
      });
    }
    
    document.body.removeChild(textArea);
  }
}
</script>
<template>
  <!-- 分享对话框 -->
  <el-dialog class="registerDialog" title="分享"
             v-model="isShow.shareDialog" :draggable="true" :modal="true"
             align-center>
    <div class="card">
      <img class="cover" :src="shareContent.coverUrl" alt="">
      <div class="content">
        <div class="title">{{shareContent.title}}</div>
        <div class="intro">{{shareContent.intro}}</div>
      </div>
    </div>
    <div style="margin: 10px 10px">请选择分享用户：</div>
    <div class="shareCard">
      <div class="friend" v-for="friend in friends" @click="sharing(friend.id)">
        <img :src="friend.avatarUrl" alt="">
        <div>{{friend.username}}</div>
      </div>
    </div>
    <div class="link-container">
      <span>分享链接：{{shareContent.url}}</span>
      <el-button size="small" type="primary" @click="copyLink" style="margin-left: 10px;">复制链接</el-button>
    </div>
  </el-dialog>
</template>
<style scoped>
.card {
  border-radius: 10px;
  width: 470px;
  height: 170px;
  background-color: rgba(253,254,255,0.2);
  box-shadow: 0 0 1px 0 rgb(53,55,55,1);
  overflow: hidden;
}
.card .cover {
  height: 160px;
  width: 220px;
  float: left;
  margin: 5px;
  border-radius: 10px;
}
.card .content {
  float: left;
  padding: 5px;
  width: 230px;
  height: 140px;
}
.card .title {
  color: black;
  font-size: 20px;
}
.card .intro {
}

.shareCard {
  border-radius: 10px;
  height: 90px;
  background-color: rgba(253,254,255,0.2);
  box-shadow: 0 0 1px 0 rgb(53,55,55,1);
  overflow-x: auto;
  overflow-y: hidden;
}

.friend {
  float: left;
  width: 60px;
  height: 80px;
  margin: 5px;
  border-radius: 10px;
  transition: all 0.1s ease-in-out;
  user-select: none;
}
.friend:hover {
  background-color: rgba(201,202,203,0.5);
}
.friend img {
  width: 50px;
  height: 50px;
  margin: 5px 5px 0 5px;
  border-radius: 50px;
  vertical-align: bottom;
}
.friend div {
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.link-container {
  margin: 10px 0 0 0;
  width: 450px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(253,254,255,0.2);
  box-shadow: 0 0 1px 0 rgb(53,55,55,1);
  border-radius: 10px;
  padding: 10px;
}
</style>
